<template>
  <div>
    <van-nav-bar
      right-text="手机验证码登录"
      @click-left="back"
      @click-right="onClickMi"
    >
      <template #left>
        <van-icon name="arrow-left" color="#000" size="22" />
      </template>
    </van-nav-bar>
    <div class="zc">
      <p class="denglu_1">登录后才精彩</p>
      <p class="denglu_2">若该手机号未注册,将自动注册成功</p>
    </div>
    <van-form>
      <van-field 
      v-model="phone" 
      placeholder="请输入手机号/邮箱" 
      clearable
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="密码"
        placeholder="请输入密码"
      >
        <template #button>
          <span class="m-1 zt_1">|</span>
          <span @click="show = true" class="zt_1">忘记密码</span>
          <van-overlay :show="show" @click="show = false">
            <div class="wrapper">
              <div class="block">
                <van-button block class="border_0" to="/login_Mi_PhoneCz">手机重置密码</van-button>
                <van-button block class="border_0">邮箱重置密码</van-button>
                <van-button block class="border_0">账号申诉</van-button>
              </div>
            </div>
          </van-overlay>
        </template>
      </van-field>
      <div class="checkbox">
        <van-checkbox v-model="check" checked-color="#48803f" icon-size="14px">
        </van-checkbox>
        <span>
          登录即同意<a
            >联通/移动统一认证服务条<br />
            款</a
          >、美食天下<router-link to="/login_my_yhxy">用户协议</router-link
          >与<router-link to="/login_my_ystk">隐私条款</router-link>
        </span>
      </div>
      <van-button
        round
        block
        type="info"
        native-type="submit"
        class="van-button_block"
        >登录</van-button
      >
    </van-form>
    <div class="center">
      <a class="button" @click="s()"
        >其他登录方式
        <van-icon :name="checked ? down : up" />
      </a>
      <van-row v-show="!checked">
        <van-col span="8">
          <a>
            <van-image :src="wx" width="30" />
          </a>
        </van-col>
        <van-col span="8">
          <van-image :src="qq" width="30" />
        </van-col>
        <van-col span="8">
          <van-image :src="wb" width="30" />
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      phone: "",
      sms: "",
      check: true,
      checked: true,
      up: require("../assets/icon/icon_login_arrow_up.png"),
      down: require("../assets/icon/icon_login_arrow_down.png"),
      qq: require("../assets/icon/icon_share_qq_friend.png"),
      wx: require("../assets/icon/icon_share_weixin.png"),
      wb: require("../assets/icon/icon_share_weibo.png"),
    };
  },
  methods: {
    back() {
      this.$router.push("/login");
    },
    onClickMi() {
      this.$router.push("/login_my");
    },
    s() {
      if (this.checked == true) {
        this.checked = false;
      } else {
        this.checked = true;
      }
    },
    getSms() {
      let object = {
        phone: this.phone,
      };
      this.axios
        .post("/login_my", this.qs.stringify(object))
        .then((res) => {
          console.log(res);
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.denglu_1 {
  font-size: 24px;
  font-weight: 500;
  margin: 15px 25px;
  margin-top: 30px;
}
.denglu_2 {
  font-size: 18px;
  margin: 15px 25px;
  margin-bottom: 40px;
}
.van-nav-bar__text {
  color: #498140;
}
.van-button--primary {
  background-color: transparent;
  border: 1px solid #333;
  color: #666;
  border-radius: 999px;
  padding: 0 15px;
}
.checkbox {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 15px 0;
}
form > div:nth-child(3) > div {
  display: inline-block;
  text-align: center;
}
span > a {
  color: #141414;
}
.van-button--info {
  background-color: #48803f;
  border: 1px solid #52794c;
}
.van-button_block {
  width: 90%;
  margin: 25px auto;
}
.button {
  border: 1px solid #fff;
  text-align: center;
  color: #666;
  font-size: 12px;
  display: inline-block;
  margin: 12px 0;
}
.center {
  text-align: center;
}
.border_0 {
  border: 0;
}
.zt_1{
  color: #969696;
}
.m-1{
  margin: 0 10px;
}
/* 遮罩层 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 120px;
  background-color: #fff;
}
</style>